<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
<link rel="shortcut icon" href="img/ic.png">
    <title>成绩详情</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="css/plugins/morris.css" rel="stylesheet">
	<link href="nuget/content/content/toastr.css" rel="stylesheet" type="text/css"/>
    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- tab table-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/cdn/html5shiv-3.7.0.js"></script>
    <script src="js/cdn/respond-1.4.2.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/cdn/dataTables.bootstrap.css">
    <link rel="stylesheet" href="css/cdn/font_i0327076nave7b9.css">
    <link rel="stylesheet" type="text/css" href="css/datatable.css"/>
    <style>
        #example_paginate {
            float: right;
        }

        .handle-btn {
            cursor: pointer;
            margin: 0 2px;
        }

        #wrapper {
            padding-left: 0px;
        }

        .navigation {
            border-bottom: 3px solid #edebeb;
        }

        .navigation a:hover {
            color: #0F6AFC;
            border-bottom: 2px solid #01AAED;
        }

        .this {
            color: #01aaed;
            font-weight: bold;
            border-bottom: 2px solid #01AAED;
        }
        [v-cloak] {
			display: none;
		}
		.naav span{
			margin: 0 10px;
			font-weight: bold;
		}
		.row a{
			color: #1AA79D; 
			text-decoration:none;
		}
		.yan{
			color: red;
		}
		#biuuu_city_list .nei{
			display: none;
		}
    </style>
</head>

<body>

<div id="wrapper">
    <div id="page-wrapper">
        <div class="container-fluid">
            <div class="row sss">
                <nav class="navbar navbar-default" role="navigation" style="margin: 0">
                    <ul class="nav navbar-nav">
                        <li><a href="achievement.html">成绩管理</a></li>
                        <li class="active"><a href="javascript:;"><span class="xuanzhong">成绩详情</span></a></li>
                    </ul>
                </nav>
            </div>
            <!-- /.row -->
            <div class="row" style="margin: 0">
                <div class="panel">
                    <div class="panel-heading">
                        <ul class="nav">
                            <li class="naav" style="float: left; width: 100%; line-height: 34px;" >
                            	<b v-cloak style="width: 100%;">
                            		<span>最终成绩</span><span style="color: red;" v-cloak>{{city.teamTotalScore}}分</span><span>车队名称</span><span v-cloak>{{competitionInfo.teamName}}</span><span>跟车裁判</span><span v-cloak>{{competitionInfo.refereeName}}</span>
                            		<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#deviceStateModal">
							    		修改信息
									</button>
                            	</b>
                            </li>
                        	<button class="btn btn-primary"id="btn_01">
					    		城市赛场
							</button>
							<button class="btn btn-primary"id="btn_02">
					    		高速赛场
							</button>
							<button class="btn btn-primary"id="btn_03">
					    		城郊赛场
							</button>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="flot-chart">
                            <ul class="nav" id="biuuu_city_list" style="width: 100%;">
                            	<!--1-->
                                <li id="nei_01" v-if="citystadiumResult">
                                    <div class="panel">
                                        <div class="panel-heading">
                                            <ul class="nav">
                                                <li style="float: left; "><b><span
                                                        v-cloak>{{city.stadiumName}}</span><span
                                                        style="padding-left: 20px;"
                                                        v-cloak>{{city.time}}</span></b></li>
                                                <li style="float: right;">
                                                    <div class="btn-group" style=" color:#000;float: right; font-weight: 600; margin-right: 34px;">
                                                    	路段得分 <span style="color: red;" v-cloak>{{city.roadScore}}</span>分
                                                    	场景得分 <span style="color: red;" v-cloak>{{city.scenesScore}}</span>分
                                                    	时间得分 <span style="color: red;" v-cloak>{{city.timeScore}}</span>分
														总分数<span style="color: red;" v-cloak>{{city.totalScore}}</span>分
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="panel-body">
                                            <ul class="nav">
                                                <li style="text-align: center;">
                                                    <div class="row" style="padding-bottom: 20px;border-radius: 3px;font-size: 14px; font-weight: 600; background: #1AA79D; color: #fff;">
                                                        <div class="col-xs-3 col-sm-3" >比赛场景</div>
                                                        <div class="col-xs-3 col-sm-3">违规扣分</div>
                                                        <div class="col-xs-3 col-sm-3">人工干预记录</div>
                                                        <div class="col-xs-3 col-sm-3">成绩</div>
                                                    </div>
                                                    <div v-cloak v-for="item in citystadiumResult"  class="row" style="font-weight: 600; padding-bottom: 20px;border: 1px solid #C0C0C0; border-top: 0px;">
                                                    	<!--<div v-if="item.scenesType">
                                                    		<a v-if = "item.scenesType != 1" v-bind:href ="'EditScene.html?scenesResultId=' + item.scenesResultId" target="_blank" class="col-xs-3 col-sm-3">{{ item.scenesName }}({{ item.scenesScore }})</a>
                                                        	<a v-else v-bind:href ="'EditScene.html?scenesResultId=' + item.scenesResultId" target="_blank" class="col-xs-3 col-sm-3">{{ item.scenesName }}</a>
                                                        </div>-->
                                                        <a v-bind:href ="'EditScene.html?scenesResultId=' + item.scenesResultId" target="_self" class="col-xs-3 col-sm-3">{{ item.scenesName }}<span v-if="item.scenesType != 1">({{ item.scenesScore }})</span></a>
                                                    	<div class="col-xs-3 col-sm-3 yan">-{{ item.illegalScore }}分</div>
                                                        <div class="col-xs-3 col-sm-3">{{ item.manualInterventionCount }}次</div>
                                                        <div class="col-xs-3 col-sm-3 yan"><span v-if="item.scenesType != 0">- </span>{{item.scenesResult }}分</div>
                                                        
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <!--2-->
                                <li class="nei" id="nei_02">
                                    <div class="panel" v-if="stadiumResult">
                                        <div class="panel-heading">
                                            <ul class="nav">
                                                <li style="float: left; "><b><span v-cloak>{{competitionInfo.stadiumName}}</span>
                                                	<span style="padding-left: 20px;" v-cloak>{{competitionInfo.time}}</span></b></li>
                                                <li style="float: right;">
                                                    <div class="btn-group" style=" color:#000;float: right; font-weight: 600; margin-right: 34px;">
                                                    	路段得分 <span style="color: red;" v-cloak>{{competitionInfo.roadScore}}</span>分
                                                    	场景得分 <span style="color: red;" v-cloak>{{competitionInfo.scenesScore}}</span>分
                                                    	时间得分 <span style="color: red;" v-cloak>{{competitionInfo.timeScore}}</span>分
														总分数 <span style="color: red;" v-cloak>{{competitionInfo.totalScore}}</span>分
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="panel-body">
                                            <ul class="nav">
                                                <li style="text-align: center;">
                                                     <div class="row" style="padding-bottom: 20px;border-radius: 3px; background: #1AA79D;color: #fff;">
                                                        <div class="col-xs-3 col-sm-3">比赛场景</div>
                                                        <div class="col-xs-3 col-sm-3">违规扣分</div>
                                                        <div class="col-xs-3 col-sm-3">人工干预记录</div>
                                                        <div class="col-xs-3 col-sm-3">成绩</div>
                                                    </div>
                                                    <div class="row" v-cloak v-for="item in stadiumResult" style="padding-bottom: 20px;border-right: 1px solid #C0C0C0;border-left: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0;" >
                                                         <a v-bind:href ="'EditScene.html?scenesResultId=' + item.scenesResultId" target="_self" class="col-xs-3 col-sm-3">{{ item.scenesName }}<span v-if="item.scenesType != 1">({{ item.scenesScore }})</span></a>
                                                    	<div class="col-xs-3 col-sm-3 yan">-{{ item.illegalScore }}分</div>
                                                        <div class="col-xs-3 col-sm-3">{{ item.manualInterventionCount }}次</div>
                                                        <div class="col-xs-3 col-sm-3 yan"><span v-if="item.scenesType != 0">- </span>{{item.scenesResult }}分</div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <!--3-->
                                <li class="nei" id="nei_03">
                                    <div class="panel" v-if="suburbstadiumResult">
                                        <div class="panel-heading">
                                            <ul class="nav">
                                                <li style="float: left; "><b><span v-cloak>{{suburb.stadiumName}}</span>
                                                	<span style="padding-left: 20px;" v-cloak>{{suburb.time}}</span></b></li>
                                                <li style="float: right;">
                                                    <div class="btn-group" style=" color:#000;float: right; font-weight: 600; margin-right: 34px;">
                                                    	路段得分 <span style="color: red;" v-cloak>{{suburb.roadScore}}</span>分
                                                    	场景得分 <span style="color: red;" v-cloak>{{suburb.scenesScore}}</span>分
                                                    	时间得分 <span style="color: red;" v-cloak>{{suburb.timeScore}}</span>分
														总分数 <span style="color: red;" v-cloak>{{suburb.totalScore}}</span>分
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="panel-body">
                                            <ul class="nav">
                                                <li style="text-align: center;">
                                                     <div class="row" style="padding-bottom: 20px;border-radius: 3px; background: #1AA79D;color: #fff;">
                                                        <div class="col-xs-3 col-sm-3">比赛场景</div>
                                                        <div class="col-xs-3 col-sm-3">违规扣分</div>
                                                        <div class="col-xs-3 col-sm-3">人工干预记录</div>
                                                        <div class="col-xs-3 col-sm-3">成绩</div>
                                                    </div>
                                                    <div class="row" v-cloak v-for="item in suburbstadiumResult" style="padding-bottom: 20px;border-right: 1px solid #C0C0C0;border-left: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0;" >
                                                         <a v-bind:href ="'EditScene.html?scenesResultId=' + item.scenesResultId" target="_self" class="col-xs-3 col-sm-3">{{ item.scenesName }}<span v-if="item.scenesType != 1">({{ item.scenesScore }})</span></a>
                                                    	<div class="col-xs-3 col-sm-3 yan">-{{ item.illegalScore }}分</div>
                                                        <div class="col-xs-3 col-sm-3">{{ item.manualInterventionCount }}次</div>
                                                        <div class="col-xs-3 col-sm-3 yan"><span v-if="item.scenesType != 0">- </span>{{item.scenesResult }}分</div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 修改信息 -->
				<div class="modal fade" id="deviceStateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content" style="border-top: 5px solid #12dbcd;">
							<div class="modal-body">
		                        <div class="panel-body">
		                           <form class="form-horizontal" id="TeamsForm" method="get">
		                           	    <div class="text-center" style="line-height: 34px; margin-bottom: 5px; font-size: 16px;"><b>修改信息</b></div>
		                                <div class="form-group">
		                                	<label class="col-sm-2 control-label">选择裁判</label>
		                                    <input id="stadiumResultId" name="stadiumResultId" type="hidden" :value="stadiumResult[0].stadiumResultId" v-if="stadiumResult[0]"/>
		                                    <input id="teamId" name="teamId" type="hidden" :value="stadiumResult[0].teamId" v-if="stadiumResult[0]"/>
		                                    <div class="col-sm-10">
		                                         <select class="selectpicker show-tick form-control" v-model="selected" id="refereeId">
													<option  v-for="option in DetailsObj"  :id="option.refereeId" v-bind:value="option.refereeName">
														{{option.refereeName}}
													</option>
												</select>
												<input id="refereeName" name="refereeName" type="hidden" :value="selected"/>
											</div>
		                                </div>
		                                <div class="text-center">
		                                	<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">
												关闭
											</button>
											<button type="submit" v-on:click="Submit()" class="btn btn-primary" style="margin-left: 10px;">
												保存
											</button>
										</div>
		                            </form>
		                        </div>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->

    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->
<!-- 模态框（Modal） -->
<div class="modal fade" id="ScoreModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
            </div>
            <div class="modal-body">
                <div class="panel-body">
                    <form class="form-horizontal" id="addform" method="get">
                    	<div class="form-group">
                            <label class="col-sm-8 control-label">两相位丁字路口直行(20分)</label>
                            <label class="col-sm-4 control-label"><span>-15分</span></label>
                        </div>
                    	<div class="form-group">
                    		<div class="col-sm-4">比赛行为记录</div>
                    	</div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">闯红灯(<span>15</span>分)</label>
                            <label class="col-sm-2 control-label"><span class="color">通过</span></label>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">闯红灯(<span>15</span>分)</label>
                            <label class="col-sm-2 control-label"><span class="color">未通过</span></label>
                        </div>
                        <div class="form-group">
                    		<div class="col-sm-4">人工干预记录</div>
                    	</div>
                    	<div class="form-group">
                            <label class="col-sm-4 control-label">时间段~时间段</label>
                            <label class="col-sm-8 control-label"><span>-15分</span></label>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">时间段~时间段</label>
                            <label class="col-sm-8 control-label"><span>-15分</span></label>
                        </div>
                    </form>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- tab table-->
<script src="js/cdn/jquery.dataTables.min.js"></script>
<script src="js/cdn/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript" src="js/vue/vue-router.js"></script>
<script src="nuget/content/scripts/toastr.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script>
    var userName = localStorage.getItem("userName");    $("#userName").text(userName);
    var vue = new Vue({
        el: '#page-wrapper',
        data: {
        	selected:[],
        	DetailsObj:{},
        	competitionInfo: {
                teamName: "",
                totalScore:0,
            },
            city:{},
            stadiumResult: {},
            citystadiumResult:{},
            suburb:{},
            suburbstadiumResult:{},
            teamId: getQueryString("teamId", window.location.href), //获取teamId;
            scenesData:[],
        },
        mounted: function () {
            this.City();
            this.highspeed();
            this.Suburb();
            this.referees();
            this.btn();
        },
        methods: {
        	referees:function(){
        		var _self = this;
                $.ajax({
                    type: "get",
                    url: url+'/referees',
                    async: false,
                    data:{
						"currentPage":1,
						"pageSize":999,
					},
                    async: false,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    beforeSend: function (request) {
                        request.setRequestHeader("accessToken", accessToken);
                    },
                    success: function (data) {
                        console.log(data);
                    	if(data.code == 1){
                    		_self.DetailsObj = {};
							var result = data.result;
							_self.DetailsObj = result;
                    	}
                    }
        		});
        	},
        	Submit:function(){
            	var stadiumResultId = $("#stadiumResultId").val();
            	var refereeName = $("#refereeName").val();
            	var refereeId = $("#refereeId option:selected").attr("id");
            	var teamId = $("#teamId").val();
		  		var datas = '{"stadiumResultId":"'+stadiumResultId+'","refereeName":"'+refereeName+'","refereeId":"'+refereeId+'","teamId":"'+teamId+'"}';
		  		var th = this;
		  		$.ajax({
		  			type: "PUT",
		  			url:url+'/users/'+adminId+'/stadiumResult/'+stadiumResultId,
		  			data:datas,
					async:false,
		  			dataType: 'json',
					contentType: "application/json; charset=utf-8",
		  			beforeSend: function(request) {
						request.setRequestHeader("accessToken", accessToken);
					},
					success: function(data) {
						if(data.code == 1){
							$('#deviceStateModal').modal('hide');

						}else{
							toastr['error'](data.description);
						}
						/*$('#myModal').modal('hide');
						th.deviceBasicId();//刷新*/
					}
		  		});
		  	},
        	//城市
            City: function () {
                var _self = this;
                $.ajax({
                    type: "get",
                    url: url + '/users/' + adminId + "/teams/" + teamId + "/stadiumResult?stadiumId=1&time="+(new Date().getTime()),
                    async: false,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    beforeSend: function (request) {
                        request.setRequestHeader("accessToken", accessToken);
                    },
                    success: function (data) {
                    	if(data.code == 1){
                    		var result = data.result;
	                        _self.city.teamName = result.teamName;
	                        _self.city.refereeName = result.refereeName;
	                        _self.city.competitionTime = replaceDate(result.startTime / 1000);
	                       
	                        if(result.stadiumName != null){
	                        	_self.city.stadiumName = result.stadiumName;
	                        }else{
	                        	toastr['error']('当前赛场暂无数据');
	                        };
	                        _self.city.scenesScore = result.scenesScore;
	                        _self.city.roadScore = result.roadScore;
	                        _self.city.timeScore = result.timeScore;
	                        _self.city.totalScore = result.totalScore;
                            _self.city.time = replaceTime(result.startTime / 1000) + "~" + replaceHourTime(result.endTime / 1000);
                            _self.citystadiumResult = result.scenesResultList;
                            _self.city.teamTotalScore = result.teamTotalScore;
                    		/*var result = data.result;
	                        _self.competitionInfo.teamName = result[0].teamName;
	                        _self.competitionInfo.refereeName = result[0].refereeName;
	                        _self.competitionInfo.competitionTime = replaceDate(result[0].startTime / 1000);
	                        
                            _self.stadiumResult = result;
	                        for (var i = 0; i < _self.stadiumResult.length; i++) {
	                            _self.stadiumResult[i].time = replaceTime(result[0].startTime / 1000) + "~" + replaceHourTime(result[i].endTime / 1000);
	                            _self.competitionInfo.totalScore =_self.competitionInfo.totalScore+_self.stadiumResult[i].totalScore;
	                        }*/
						}else{
							window.location.href="404.html"; 
						}
                    }
                });
            },
            //高速
            highspeed: function () {
                var _self = this;
                $.ajax({
                    type: "get",
                    url: url + '/users/' + adminId + "/teams/" + teamId + "/stadiumResult?stadiumId=2&time="+(new Date().getTime()),
                    async: false,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    beforeSend: function (request) {
                        request.setRequestHeader("accessToken", accessToken);
                    },
                    success: function (data) {
                    	if(data.code == 1){
                    		var result = data.result;
	                        _self.competitionInfo.teamName = result.teamName;
	                        _self.competitionInfo.refereeName = result.refereeName;
	                        _self.competitionInfo.competitionTime = replaceDate(result.startTime / 1000);
	                        _self.competitionInfo.stadiumName = result.stadiumName;
	                        _self.competitionInfo.scenesScore = result.scenesScore;
	                        _self.competitionInfo.roadScore = result.roadScore;
	                        _self.competitionInfo.timeScore = result.timeScore;
	                        _self.competitionInfo.totalScore = result.totalScore;
                            _self.competitionInfo.time = replaceTime(result.startTime / 1000) + "~" + replaceHourTime(result.endTime / 1000);
                            _self.stadiumResult = result.scenesResultList;
                            
						}else{
							window.location.href="404.html"; 
						}
                    }
                });
            },
            //城郊
            Suburb: function () {
                var _self = this;
                $.ajax({
                    type: "get",
                    url: url + '/users/' + adminId + "/teams/" + teamId + "/stadiumResult?stadiumId=3&time="+(new Date().getTime()),
                    async: false,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    beforeSend: function (request) {
                        request.setRequestHeader("accessToken", accessToken);
                    },
                    success: function (data) {
                    	if(data.code == 1){
                    		var result = data.result;
	                        _self.suburb.teamName = result.teamName;
	                        _self.suburb.refereeName = result.refereeName;
	                        _self.suburb.competitionTime = replaceDate(result.startTime / 1000);
	                        _self.suburb.stadiumName = result.stadiumName;
	                        _self.suburb.scenesScore = result.scenesScore;
	                        _self.suburb.roadScore = result.roadScore;
	                        _self.suburb.timeScore = result.timeScore;
	                        _self.suburb.totalScore = result.totalScore;
                            _self.suburb.time = replaceTime(result.startTime / 1000) + "~" + replaceHourTime(result.endTime / 1000);
                            _self.suburbstadiumResult = result.scenesResultList;
						}else{
							window.location.href="404.html"; 
						}
                    }
                });
            },
            
            
		  	btn:function(){
		  		$("#btn_01").click(function(){
		  			$("#nei_01").removeClass("nei");
					$("#nei_02").addClass("nei");
					$("#nei_03").addClass("nei");
//		  			$("#btn_li_1").addClass("cur");
//					$("#btn_li_1").siblings().removeClass("cur");
		  		});
		  		$("#btn_02").click(function(){
		  			$("#nei_02").removeClass("nei");
					$("#nei_01").addClass("nei");
					$("#nei_03").addClass("nei");
		  		});
		  		$("#btn_03").click(function(){
		  			$("#nei_03").removeClass("nei");
					$("#nei_02").addClass("nei");
					$("#nei_01").addClass("nei");
		  		});
		  	},
        },
    });

</script>
</body>

</html>
